<template>
  <div class="xmmxb">
    <div class="modle-title">
      <div class="title">
        <div class="title-search">
          <input class="i-s" type="text" placeholder="输入搜索关键词" />
          <div class="search-btn" @click="handleButtonClick('搜索')">
            <img class="search-btn-img" src="@/assets/images/pageCommon/search_btn.png" alt="" />
          </div>
          <div class="down-btn">
            下载
            <img class="down-btn-img" src="@/assets/images/pageCommon/down_btn.png" alt="" />
          </div>
        </div>
      </div>
      <div class="content">
        <div class="c-left">基础设施投资项目</div>
        <div class="c-tab">
          <div class="table-wrapper">
            <div class="table-header">
              <ul>
                <li class="table-row">
                  <span
                    v-for="(item, index) of tableColumn"
                    :key="index"
                    class="column"
                    :class="item.width"
                    >{{ item.label }}</span
                  >
                </li>
              </ul>
            </div>
            <div class="table-content">
              <ul>
                <li
                  v-for="(row, index) in tableData"
                  :key="index"
                  :class="{ 'table-row': true, 'even-row': index % 2 === 1 }"
                >
                  <span class="column w190">{{ row.progress }}</span>
                  <span class="column w604">{{ row.projectName }}</span>
                  <span class="column w520">{{ row.unit }}</span>
                  <span class="column w400">{{ row.jsdw }}</span>
                  <span class="column w400">{{ row.ztz }}</span>
                  <span class="column w400">{{ row.ndjhtz }}</span>
                  <span class="column w394">{{ row.bnsjwctz }}</span>
                  <span class="column">{{ row.sshy }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const handleButtonClick = (buttonName: string) => {
  console.log(`点击了按钮 ${buttonName}`)
}
const tableColumn = ref([
  { label: '进度', prop: '', width: 'w190' },
  { label: '项目名称', prop: '', width: 'w604' },
  { label: '业主单位', prop: '', width: 'w520' },
  { label: '建设阶段', prop: '', width: 'w400' },
  { label: '总投资', prop: '', width: 'w400' },
  { label: '年度计划投资', prop: '', width: 'w400' },
  { label: '本年实际完成投资', prop: '', width: 'w394' },
  { label: '所属行业', prop: '' }
])
const tableData = ref([
  {
    progress: '2022年1月',
    projectName: '项目1',
    unit: '单位1',
    jsdw: '建设单位1',
    ztz: '总投资1',
    ndjhtz: '年度计划投资1',
    bnsjwctz: '本年实际完成投资1',
    sshy: '所属行业1'
  },
  {
    progress: '2022年2月',
    projectName: '项目2',
    unit: '单位2',
    jsdw: '建设单位2',
    ztz: '总投资2',
    ndjhtz: '年度计划投资2',
    bnsjwctz: '本年实际完成投资2',
    sshy: '所属行业2'
  },
  {
    progress: '2022年3月',
    projectName: '项目3',
    unit: '单位3',
    jsdw: '建设单位3',
    ztz: '总投资3',
    ndjhtz: '年度计划投资3',
    bnsjwctz: '本年实际完成投资3',
    sshy: '所属行业3'
  },
  {
    progress: '2022年4月',
    projectName: '项目4',
    unit: '单位4',
    jsdw: '建设单位4',
    ztz: '总投资4',
    ndjhtz: '年度计划投资4',
    bnsjwctz: '本年实际完成投资4',
    sshy: '所属行业4'
  },
  {
    progress: '2022年5月',
    projectName: '项目5',
    unit: '单位5',
    jsdw: '建设单位5',
    ztz: '总投资5',
    ndjhtz: '年度计划投资5',
    bnsjwctz: '本年实际完成投资5',
    sshy: '所属行业5'
  },
  {
    progress: '2022年6月',
    projectName: '项目6',
    unit: '单位6',
    jsdw: '建设单位6',
    ztz: '总投资6',
    ndjhtz: '年度计划投资6',
    bnsjwctz: '本年实际完成投资6',
    sshy: '所属行业6'
  },
  {
    progress: '2022年7月',
    projectName: '项目7',
    unit: '单位7',
    jsdw: '建设单位7',
    ztz: '总投资7',
    ndjhtz: '年度计划投资7',
    bnsjwctz: '本年实际完成投资7',
    sshy: '所属行业7'
  },
  {
    progress: '2022年8月',
    projectName: '项目8',
    unit: '单位8',
    jsdw: '建设单位8',
    ztz: '总投资8',
    ndjhtz: '年度计划投资8',
    bnsjwctz: '本年实际完成投资8',
    sshy: '所属行业8'
  },
  {
    progress: '2022年9月',
    projectName: '项目9',
    unit: '单位9',
    jsdw: '建设单位9',
    ztz: '总投资9',
    ndjhtz: '年度计划投资9',
    bnsjwctz: '本年实际完成投资9',
    sshy: '所属行业9'
  },
  {
    progress: '2022年10月',
    projectName: '项目10',
    unit: '单位10',
    jsdw: '建设单位10',
    ztz: '总投资10',
    ndjhtz: '年度计划投资10',
    bnsjwctz: '本年实际完成投资10',
    sshy: '所属行业10'
  }
])
</script>

<style lang="scss" scoped>
.xmmxb {
  padding: 0 64vw * $Bw;
  .modle-title {
    width: 100%;
    height: auto;
    .title {
      width: 100%;
      height: 90vh * $Bh;
      background: url('@/assets/images/components/modleTitle/bg_bottom_title.png') no-repeat;
      background-size: 3371vw * $Bw 100%;
      display: flex;
      align-items: center;
      .title-search {
        margin-left: 312vw * $Bw;
        display: flex;
        .i-s {
          border-top: 2vh * $Bh solid #4b6bb4;
          border-bottom: 2vh * $Bh solid #4b6bb4;
          border-left: 2vw * $Bw solid #4b6bb4;
          border-right: none;
          height: 56vh * $Bh;
          background: #143b82;
          color: #b8c4d9;
          font-size: 24vh * $Bh;
        }
        input:focus {
          outline: none;
        }
        .search-btn {
          width: 78vw * $Bw;
          height: 54vh * $Bh;
          border-top: 2vh * $Bh solid #4b6bb4;
          border-bottom: 2vh * $Bh solid #4b6bb4;
          border-left: 2vw * $Bw solid #4b6bb4;
          border-right: 2vw * $Bw solid #4b6bb4;
          cursor: pointer;
          // background: url('@/assets/images/pageCommon/search_btn.png') no-repeat;
          // background-size: 100%;
          text-align: center;
          .search-btn-img {
            vertical-align: text-top;
          }
        }
        .down-btn {
          margin-left: 32vw * $Bw;
          color: #ffffff;
          font-size: 24vh * $Bh;
          border-top: 2vh * $Bh solid #4b6bb4;
          border-bottom: 2vh * $Bh solid #4b6bb4;
          border-left: 2vw * $Bw solid #4b6bb4;
          border-right: 2vw * $Bw solid #4b6bb4;
          width: 146vw * $Bw;
          height: 56vh * $Bh;
          line-height: 56vh * $Bh;
          padding-left: 25vw * $Bw;
          .down-btn-img {
            vertical-align: text-top;
            margin-left: 13vw * $Bw;
          }
        }
      }
    }
    .content {
      width: 100%;
      height: auto;
      margin-top: 38vh * $Bh;
      background-color: #0c2357;
      border-radius: 12vh * $Bh;
      color: #ffffff;
      // padding: 32vh * $Bh 32vw * $Bw;
      display: flex;
      .c-left {
        width: 288vw * $Bw;
        text-align: center;
        height: 373vh * $Bh; /* 设置表格容器的高度 */
        line-height: 373vh * $Bh;
        padding-left: 33vw * $Bw;
        padding-right: 69vw * $Bw;
        word-wrap: break-word; /* 旧版浏览器支持 */
        overflow-wrap: break-word; /* 标准属性 */
      }
      .table-wrapper {
        width: 3421vw * $Bw;
        height: 373vh * $Bh; /* 设置表格容器的高度 */
        overflow: scroll; /* 隐藏溢出内容 */
        position: relative;
      }

      .table-header {
        position: sticky;
        top: 0; /* 表头固定在顶部 */
        background-color: #213b76;
        height: 80vh * $Bh; /* 设置表头的高度 */
        // line-height: 80vh * $Bh; /* 设置行高，以便内容垂直居中 */
        border-bottom: 2px solid #5492e4;
      }
      .table-content {
        overflow-y: scroll; /* 表格内容超出高度时实现滚动 */
      }
      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      .table-row {
        display: flex;
        // border-bottom: 1px solid #ddd;
        height: 80vh * $Bh; /* 设置行的高度 */
        .column {
          display: inline-block;
          // line-height: 80vh * $Bh; /* 设置行的高度 */
        }
      }
      .even-row {
        background: #213b76;
      }

      .column {
        flex: 1;
        padding: 8px;
        text-align: left;
      }
    }
  }
}

.w190 {
  width: 190vw * $Bw;
}
.w604 {
  width: 604vw * $Bw;
}
.w520 {
  width: 520vw * $Bw;
}
.w400 {
  width: 400vw * $Bw;
}
.w394 {
  width: 394vw * $Bw;
}
</style>
